<template>
  <div class="homepage">
    <p>Home Page</p>
    <h3>{{ $t("message.hello") }}</h3>
    <p>{{welcomeMessage}}</p>
    <a @click="goto()">link to About</a>
  </div>
</template>

<script>
export default {
  name: 'home',
  props: ['lang'],
  data(){
    return{
      username: 'Joyce',
    }
  },
  computed:{
    welcomeMessage(){
      return this.username + ', '+ this.$t("message.welcome");
    }
  },
  methods:{
    goto(){
      this.$router.push({name:'about',params: {lang: this.lang}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
